<template>
	<view>
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				商品评价
			</view>
		</view>
		<view class="evaluate_con">
			<view class="evaluate_info">
				<view class="evaluate_info_hd">
					<view class="evaluate_info_img">
						<image src="../../static/image/shop/shop_01.jpg" mode=""></image>
					</view>
					<view class="evaluate_info_name">
						意大利超火的小面条馆
					</view>
				</view>
				<view class="evaluate_info_bd">
					<view class="evaluate_info_label">
						整体评价
					</view>
					<view class="evaluate_info_stars">
						<view class="evaluate_star" @tap="chanStar(1)">
							<image src="../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 1"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 1"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(2)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 2"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 2"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(3)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 3"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 3"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(4)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 4"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 4"></image>
						</view>
						<view class="evaluate_star" @tap="chanStar(5)">
							<image src=".../../static/image/order/star.svg" mode="" v-if="commentDto.star >= 5"></image>
							<image src="../../static/image/order/unstar.svg" mode="" v-if="commentDto.star < 5"></image>
						</view>

					</view>
				</view>
			</view>
			<view class="evaluate_message">
				<textarea placeholder="写下你对商家的评价，让他升个级呗！"></textarea>
				<view class="evaluate_message_imgs">
					<view class="evaluate_message_img" v-for="(item,index) in commentDto.picList">
						<image :src="item" mode="aspectFill"></image>
					</view>
					<view class="evaluate_message_add" v-if="commentDto.picList.length < 3" @tap="addPic()">
						<uni-icons type="plusempty" size="20" color="#CAD2DB"></uni-icons>
						<text>{{commentDto.picList.length}}/3</text>
					</view>
				</view>
			</view>
			<view class="evaluate_btn" @tap="sureSend()">
				发布评论
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentDto:{
					star:0,
					picList:[]
				}
			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			chanStar(num) {
				this.star = num;
			},
			addPic(){
				const vm = this;
				uni.chooseImage({
					success: function(res) {
						let imageUrl = res.tempFilePaths[0]; // 显示选择的图片
						vm.commentDto.picList.push(imageUrl)
						// uni.uploadFile({
						// 	url: 'http://baidefuappapi.zhilongapp.com/app/storage/upload',
						// 	filePath: imageUrl,
						// 	name: 'file',
						// 	formData: {},
						// 	success: res => {
						// 		let data = JSON.parse(res.data);
						// 		if (data.code == 200) {
						// 			vm.commentDto.picList.push(data.data.url)
						// 		}
						// 		// 失败报错
						// 		if (data.code == 500) {
						// 			uni.showToast({
						// 				title: '上传失败',
						// 				icon: 'none',
						// 				duration: 2000
						// 			});
						// 		}
						// 	}
						// });
					}
				});
			},
			sureSend(){
				uni.navigateTo({
					url:'/pages/order/evaluateList'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9FBFC;
	}

	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;
		background-color: #fff;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
		}
	}
	.evaluate_con{
		padding: 0 24rpx;
		.evaluate_info{
			margin-top: 40rpx;
			padding: 24rpx;
			border-radius: 12rpx;
			background-color: #fff;
			.evaluate_info_hd{
				display: flex;
				align-items: center;
				.evaluate_info_img{
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}
				}
				.evaluate_info_name{
					font-size: 36rpx;
					color: #2E343A;
					font-weight: 500;
					margin-left: 20rpx;
				}
			}
			.evaluate_info_bd{
				display: flex;
				align-items: center;
				margin-top: 18rpx;
				.evaluate_info_label{
					color: #000000;
					font-size: 24rpx;
					font-weight: bolder;
				}
				.evaluate_info_stars{
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					.evaluate_star{
						margin-right: 20rpx;
						image{
							width: 48rpx;
							height: 44rpx;
						}
					}
				}
			}
		}
		.evaluate_message{
			margin-top: 24rpx;
			padding: 24rpx;
			border-radius: 12rpx;
			background-color: #fff;
			textarea{
				height: 200rpx;
			}
			.evaluate_message_imgs{
				display: flex;
				flex-wrap: wrap;
				.evaluate_message_img{
					width: 136rpx;
					height: 136rpx;
					border-radius: 8rpx;
					margin-right: 15rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.evaluate_message_add{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 136rpx;
				height: 136rpx;
				border-radius: 8rpx;
				border: 1rpx dashed #CAD2DB;
				background-color: #F6F7F8;
				text{
					font-size: 24rpx;
					color: #CAD2DB;
				}
			}
		}
		.evaluate_btn{
			width: 100%;
			height: 90rpx;
			border-radius: 90rpx;
			background-color: #2588FF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-top: 70rpx;
		}
	}
</style>